<template>
    <div class="product">
        <product-param v-bind:title="detail.title" :id="id">
            <template v-slot:buy>
                <button class="btn" @click="buy">立即购买</button>
            </template>
        </product-param>

        <div class="wrapper" v-html="detail.description">
            {{detail.description}}
        </div>

    </div>
</template>

<script>
    import ProductParam from './../components/ProductParam'
    export default {
        name: "product",
        data() {
          return {
              id: this.$route.params.id,
              detail: []
          }
        },
        mounted() {
            this.getProductInfo(this.id)
        },
        components:{
            ProductParam
        },
        methods: {
            getProductInfo(id){
                this.http.get(`/api/goods/content/${id}`).then((res)=>{
                    console.log(res.result)
                    this.detail = res.result
                })
            },
            buy() {
                this.$router.push({
                    path: `/detail/${this.id}`
                })
            }
        }
    }
</script>

<style >
    .wrapper {
        width: 100% !important;
    }
    .wrapper img {
        width: 100%!important;

    }

</style>